<style lang="less" scoped>
.video-history {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .timeline {
    height: 100%;
    .timeline-item {
      height: 120px;
    }
  }
  .single-video {
    display: flex;
    .video-cover {
      width: 250px;
      height: 130px;
    }
    .video-text {
      width: 650px;
      margin-left: 30px;
      position: relative;
      .video-title {
        font-size: 18px;
        font-weight: bold;
      }
      .video-info {
        position: absolute;
        bottom: 0;
      }
      .delete-icon {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 50%;
      }
    }
  }
}
</style>

<template>
  <div class="video-history">
    <el-row :gutter="24">
      <el-col :span="4">
        <el-timeline class="timeline">
          <el-timeline-item
              v-for="(activity, index) in videoHistory"
              :key="index"
              :timestamp="activity.watchTime"
              class="timeline-item"
          >
          </el-timeline-item>
        </el-timeline>
      </el-col>
      <el-col :span="20">
        <div class="single-video" v-for="(item,index) in videoHistory" :key="index">
          <div class="video-cover">
            <img :src=item.cover alt="" style="width: 100%;height: 100%"/>
          </div>
          <div class="video-text">
            <el-text class="video-title">{{ item.title }}</el-text>
            <div class="video-info">
              <!-- 作者信息 -->
              <el-icon>
                <User></User>
              </el-icon>
              <span style="margin-left: 10px">{{ item.publisherName }}</span>
              <span style="margin-left: 10px">|</span>
              <!-- 视频标签 -->
              <el-tag v-for="(it,idx) in item.tags" :key="idx" style="margin-left: 10px;">{{it}}</el-tag>
            </div>
            <el-icon class="delete-icon">
              <Delete></Delete>
            </el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Delete, User} from "@element-plus/icons-vue";
import {getVideoHistory} from "../../../api/user/user.js";

let videoHistory = ref();

// 进入页面时 获取用户一个月内的视频观看历史记录
function getUserVideoHistory() {
  getVideoHistory().then(response => {
    videoHistory.value = response.data;
    console.log(videoHistory.value)
  })
}
getUserVideoHistory();
</script>